import React, { Component, Fragment } from 'react';
import { Table } from 'antd';
import styles from './index.module.less';

class OptimizedWrapper extends React.Component {
  shouldComponentUpdate(nextProps) {
    // Perform a custom check
    return false;
  }

  render() {
    const { className, children } = this.props;
    return (
      <div className={className}>
        {children.map(i => {
          console.log(i);
          return (
            <Fragment key={i.key}>
              <div className>
                <div colSpan={i.props.columns.length - 1}>
                  订单号:1234657980
                </div>
                <div>
                  <a>查看订单详情</a>
                </div>
              </div>
              {i}
            </Fragment>
          );
        })}
      </div>
    );
  }
}

export default class OrderTable extends Component {
  static defaultProps = {
    dataSource: [],
    columns: [],
  };

  render() {
    const { columns, dataSource } = this.props;

    return (
      <div className={styles.ui_table}>
        <div className={styles.table_thead}>
          <table>
            <thead>
              <tr>
                {columns.map(i => {
                  return <th key={i.key}>{i.title}</th>;
                })}
              </tr>
            </thead>
          </table>
        </div>
        <div className={styles.table_tbody}>
          {dataSource.map(e => {
            return (
              <table key={e.key}>
                <tbody>
                  <tr className={styles.top}>
                    <td colSpan={columns.length - 1}>订单号：123456798</td>
                    <td>查看订单详情</td>
                  </tr>
                  <tr className={styles.bottom}>
                    {columns.map(i => {
                      return (
                        <td key={i.key}>
                          {i.render
                            ? i.render(e[i.dataIndex], e)
                            : e[i.dataIndex]}
                        </td>
                      );
                    })}
                  </tr>
                </tbody>
              </table>
            );
          })}
        </div>
      </div>
    );
  }
}
